import React from 'react';
import ReactDOM from 'react-dom';
// import RouteMap from './router/router';
import './index.css';
import createStore from './store/store';
import { Provider, connect } from 'react-redux';
import Home from './containers/Home/Home';
import Reservation from './containers/Reservation/Reservation';
import UserCenter from './containers/UserCenter/UserCenter';
// import NotFound from './containers/404/404';

import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();


class App extends React.Component {
    render() {
        return(
            <div>
                <Home />
                {this.props.show === 'reservation' ? <Reservation /> : null}
                {this.props.show === 'user-center' ? <UserCenter /> : null}
            </div>
        )
    }
}

const mapStateToProps = (state, ownProps = {}) => {
    return Object.assign(ownProps, {
        show: state.page.show
    });
}

const mapDispatchToProps = (dispatch) => {
    return {}
}

const AppContainer = connect(
    mapStateToProps,
    mapDispatchToProps
)(App);

const initState = {
    page: {
        isOpen: false,
        show: 'map'
    },
    userInfo: {
        hasLogin: false,
        userName: '',
        userId: -1,
        filter: 0,
        reservation: null,
        mySpot: [{
            name: '中和宝霖广场停车场',
            address: '北京西路211号',
            spotId: 'A1-150',
            img: './parking-spot-img/1.jpg'
        }]
    },
    mapInfo: {
        hasReserved: 'not',
        state: 'normal',
        selecedSpot: '',
        searched: false,
        clearSearched: false
    }
}
const store = createStore(initState);

ReactDOM.render(
    <Provider store={store}>
        <AppContainer />
    </Provider>, 
    document.getElementById('root')
);
